{include file="public_head"}
<style>
    .center-settle {  width: 100%;  padding-bottom: 40px;  }
    .center-settle .content {  width: 1200px;  margin: 20px auto 10px;  overflow: hidden;  }
    .center-settle .content .title {  overflow: hidden;  }
    .center-settle .content .title span {  float: left;  color: #666666;  }
    .center-settle .content .title img {  float: right;  }
    .center-settle .content .main {  border: 1px solid #EFEFEF;  margin-top: 30px;  padding-bottom: 20px;  }
    .center-settle .content .info {  width: 1150px;  margin: 10px auto;  border-bottom: 1px solid #F2F2F2;  overflow: hidden;  padding-bottom: 10px;  }
    .center-settle .content .name {  font-size: 16px;  line-height: 36px;  font-family: '微软雅黑';  overflow: hidden;  }
    .center-settle .content .info .name span {  font-size: 14px;  float: right;  font-family: '宋体';  }
    .center-settle .content .info .name span a {  color: #4071FC;  }
    .center-settle .content .address {  font-size: 14px;  line-height: 40px;  color: #666666;  }
    .center-settle .content .address span {  border: 1px solid #E73E08;  padding: 13px 40px;  background: url("../../assets/img/xuan.png") no-repeat right bottom;  }
    .center-settle .content .more {  font-size: 14px;  line-height: 34px;  }
    .center-settle .content .more a {  color: #666666;  }
    .center-settle .content .more img {  margin-left: 10px;  }
    .center-settle .content .way {  width: 1150px;  margin: 10px auto 20px;  }
    .center-settle .content .way ul {  overflow: hidden;  }
    .center-settle .content .way ul li {  float: left;  width: 140px;  border: 1px solid #EFEFEF;  text-align: center;  margin-right: 20px;
        font-size: 14px;  line-height: 40px;  }
    .center-settle .content .way ul li a {  color: #666666;  }
    .center-settle .content .way ul .cur {  border: 1px solid #E73E08;  background: url("../../assets/img/xuan.png") no-repeat right bottom;  }
    .center-settle .content .details {  padding: 0 23px; /*margin-bottom: 20px;*/  }
    .center-settle .content .details .shop {  margin-left: 30px;  font-size: 14px;  line-height: 38px;  color: #666666;  }
    .center-settle .content .details .shop span {  float: right;  margin-right: 20px;  }
    .center-settle .content .details .shop span a {  color: #4071FC;  }
    .center-settle .content .details ul {  overflow: hidden;  background: #F3FBFE;  padding: 10px 0;  }
    .center-settle .content .details ul li {  float: left; text-align: center; }
    .center-settle .content .details ul .goods {  width:450px;  }
    .center-settle .content .details ul .goods div {  overflow: hidden;  }
    .center-settle .content .details ul .goods div img {  float: left;  width: 80px;  border: 1px solid #DEDEDE;  margin-left: 10px;  }
    .center-settle .content .details ul .goods div p {  float: left;  width: 260px;  margin-left: 5px;  }
    .center-settle .content .details ul .goods div p span {  display: block;  font-size: 14px;  }
    .center-settle .content .details ul .goods div p span:nth-of-type(1) {  color: #666666;  overflow: hidden;  text-overflow: ellipsis;  display: -webkit-box;  -webkit-box-orient: vertical;  -webkit-line-clamp: 2;  }
    .center-settle .content .details ul .goods div p span:nth-of-type(2) {  color: #999999;  }
    .center-settle .content .details ul .goods a > span {  display: block;  margin-left: 30px;  font-size: 14px;  line-height: 34px;  color: #999999;  }
    .center-settle .content .details ul .price {  width: 220px;}
    .center-settle .content .details ul .price span {  color: #999999;  text-decoration: line-through;  }
    .center-settle .content .details ul .num {  width: 280px;  color: #666666;  }
    .center-settle .content .details ul .have {  width: 170px;  color: #666666;  }
    .center-settle .content .ticket {  width: 1150px;  margin: 10px auto 0px;  border: 1px solid #EEEEEE;  border-left: none;
        border-right: none;  padding: 10px 0;  }
    .center-settle .content .ticket-info {  font-size: 14px;  line-height: 34px;  white-space: pre;  }
    .center-settle .content .ticket-info a {  color: #666;  }
    .center-settle .content .ticket-info span a {  color: #4071FC;  }
    .center-settle .content .favor {  width: 1150px;  margin: 0px auto;  border-bottom: 1px solid #EEEEEE;  padding: 10px 0;  }
    .center-settle .content .total {  width: 1150px;  margin: 0px auto;  overflow: hidden;  }
    .center-settle .content .total table {  float: right;  margin-top: 20px;  }
    .center-settle .content .total table tr td {  text-align: right;  font-size: 14px;  line-height: 24px;  white-space: pre;
        color: #666666;  }
    .center-settle .content .total table tr td span {  color: #E73E08;  }
    .center-settle .content .total table tr td:nth-of-type(2) {  padding-left: 50px;  }
    .center-settle .content .total table .last td:nth-of-type(1) {  font-size: 16px;  color: #363636;  }
    .center-settle .content .total table .last td:nth-of-type(2) {  font-size: 16px;  color: #E73E08;  }
    .center-settle .content .total > div {  width: 1150px;  overflow: hidden;  }
    .center-settle .content .send {  float: right;  font-size: 14px;  line-height: 34px;  padding-bottom: 10px;
        color: #999999;  }
    .center-settle .content .submit {  overflow: hidden;  margin: 10px auto 0;  }
    .center-settle .content .submit input {  display: block;  float: right;  width: 162px;  font-size: 18px;  line-height: 3;
        border: none;  border-radius: 6px;  color: white;  background: #E73E08;  margin-right: 20px;  outline: none;  }
</style>
<div class="header-det">
    <div>
        {include file="public_menu"}
    </div>
</div>
<div class="center-settle">
    <div class="content">
        <div class="main">
            <div class="info">
                <div class="name">确认积分兑换信息<span></span></div>
            </div>
            <div class="details">
                <ul>
                    <li class="goods">积分商品</li>
                    <li class="price text-center">所需积分</li>
                    <li class="num text-right">数量</li>
                </ul>
                <ul>
                    <li class="goods">
                        <!--<a href="#">-->
                            <div>
                                <img src="/{$data['picUrl']}" style="width: 80px;height: 80px;" onerror="this.src='/static/shop/img/moren2.jpg'"/>
                                <p>
                                    <span>{$data['title']}</span><br>
                                </p>
                            </div>

                        <!--</a>-->
                    </li>
                    <li class="price text-center">{$data['price']}<br></li>
                    <li class="num text-right">×1</li>

                </ul>
            </div>
            <div class="total">
                <table border="0">
                    <tr class="last">
                        <td>应付积分：</td>
                        <td>{$data['price']}</td>
                    </tr>
                </table>
                {notempty name="address['id']"}
                <div>
                    <div class="send" id="send">寄送：{$address['area_info']} {$address['address']} 收货人：{$address['name']}
                        {$address['phone']}
                    </div>
                </div>
                {else/}
                <div>
                    <span><a href="javascript:add_address();" style="color: #666666;">新添加地址</a></span>
                </div>
                {/notempty}
                <div class="more"><a onclick="other_address();" style="color: #666666;">更多收货地址</a></div>
            </div>
            <div id="dizhi" style="display: none;">
                <table border="0" style="margin-left: 20px;">
                    <tr>
                        <td class="name text-center" style="width: 80px;">收货人</td>
                        <td class="area text-center" style="width: 200px;">所在地区</td>
                        <td class="address text-center" style="width: 400px;">详细地址</td>
                        <td class="phone text-center" style="width: 100px;">电话/手机</td>
                        <td class="operate text-center" style="width: 133px;">操作</td>
                    </tr>
                    {volist name="address_list" id="vo"}
                    <tr>
                        <td class="name text-center" style="text-align:center">{$vo.name}</td>
                        <td class="area text-left" style="text-align:center">{$vo.area_info}</td>
                        <td class="address text-center" style="text-align:center">{$vo.address}</td>
                        <td class="phone text-center" style="text-align:center">{$vo.phone}</td>
                        <td class="primary text-center"><span><a href="javascript:chose_address({$vo.id});"
                                                                 style="color: black;">选择该地址</a></span></td>
                    </tr>
                    {/volist}
                </table>
            </div>
            <input type="hidden" id="address" value="{$address['id']}">
            <div class="submit">
                <input type="submit" value="确认兑换" onclick="integral_conversion({$data['id']})">
            </div>
        </div>
        <script>
            // 积分兑换
            function integral_conversion(id) {
                var address = $('#address').val();
                $.ajax({
                    url:"{:url('shop/integral/integral_conversion')}",
                    dataType: 'json',
                    type: 'post',
                    data: {'address':address,'gid':id},
                    success: function (t) {
                        if (t.code = 200) {
                            layer.msg(t.message);

                            setTimeout(function(){
                                layer.closeAll('loading');
                                // 跳转页面
                                location.href = "{:url('shop/integral/my_integral')}";
                            }, 3000);
                        }else {
                            layer.msg(t.message);
                            setTimeout(function(){
                                layer.closeAll('loading');

                            }, 3000);
                        }
                    }
                })
            }

            // 添加地址
            function add_address() {
                layer.open({
                    type: 2,
                    area: ['700px', '530px'],
                    fixed: false, //不固定
                    maxmin: true,
                    content: "{:url('shop/address/account_address')}"
                });

            }

            // 更多地址
            function other_address() {
                $('#dizhi').toggle();

            }

            // 选择地址
            function chose_address(select_address_id) {
                // 地址隐藏余赋值
                $('#address').val(select_address_id);
                var divshow = $('#send');
                // 清空数据
                divshow.text("");
                $.ajax({
                    url:"{:url('shop/integral/change_address')}",
                    dataType: 'json',
                    type: 'post',
                    data: {'id':select_address_id},
                    success:function (t) {
                        if (t.code==200) {
                            var data = "寄送："+t.area_info+t.address+"收货人："+t.name+t.phone;
                            divshow.append(data);
                            $('#dizhi').hide();
                        }
                    }
                });
            }
        </script>
        </div>
    </div>
        {include file="public_foot"}